<script lang="ts" setup>
import { ref } from 'vue'
// 订单列表组件
import type { TabItem } from '@/components/custom-tab/custom-tab.vue'
import ScrollList from './components/scroll-list.vue'

// 标签索引值
const tabIndex = ref(0)

interface OrderTabItem extends TabItem {
  /**
   * 问诊类型
   */
  type: number
  /**
   * 是否缓存组件
   */
  isKeepAlive: boolean
}
// 标签页数据
const orderTabs = ref<OrderTabItem[]>([
  { label: '极速问诊', type: 2, isKeepAlive: true },
  { label: '问医生', type: 1, isKeepAlive: false },
  { label: '开药问诊', type: 3, isKeepAlive: false },
])

// 标签页切换
const handleTabChange = (index: number) => {
  tabIndex.value = index
  // 渲染并缓存索引对应的组件
  orderTabs.value[index].isKeepAlive = true
}
</script>

<template>
  <view class="consult-page">
    <view class="consult-status-tabs">
      <!-- 自定义标签页组件 -->
      <custom-tab :data="orderTabs" @change="handleTabChange"></custom-tab>
    </view>

    <!-- 循环出多个订单列表 -->
    <template v-for="(tab, index) in orderTabs" :key="tab.label">
      <view v-show="tabIndex === index">{{ tab.label }} {{ tab.isKeepAlive }}</view>
      <!-- 
        keep-alive 缓存组件在小程序端不支持，自己实现组件 缓存+显隐 效果
          通过 v-if   是否创建组件
          通过 v-show 显示或隐藏组件
      -->
      <ScrollList v-if="tab.isKeepAlive" v-show="tabIndex === index" :type="tab.type" />
    </template>
  </view>
</template>

<style lang="scss"></style>
